import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js'; //引入jquery类库




function showDetail() {

    const spic = $('.large'); //小图
    const sf = $('.mirror_s'); //小放
    const bpic = $('.b_pic'); //大图
    const bf = $('.mirror_b'); //大放

    //从地址拦获取sid
    let sid = location.search.substring(1).split('=')[1]
        // 如果sid不存在则默认为1
    if (!sid) {
        sid = '1'
    }
    // 传输sid给后台 渲染后台传回来的数据
    $.ajax({ //10.31.157.18
        url: 'http://10.31.157.18/changhong/php/detail.php',
        data: {
            dataSid: sid
        },
        dataType: 'json' //处理数据格式
    }).done(function(data) {
        $('.s_pic').attr('src', data.picurl);
        $('.b_pic').attr('src', data.picurl);
        $('.g_title').html(data.title);
        $('.g_price').html('￥' + data.price);
        //渲染放大镜下面的小图
        let smallpiclist = data.piclisturl.split(',');
        let strHtml = '';
        $.each(smallpiclist, function(index, value) {
            strHtml += `
                <li><img src="${value}" /></li>
            `;
        });
        list.html(strHtml);
    });

    // 放大镜效果

    spic.hover(function() {
        sf.css('visibility', 'visible');
        bf.css('visibility', 'visible');
        // 鼠标移入商品图时,由小放和大放的宽高比值等于原图和大图的宽高比值计算出小放的宽高
        sf.width(bf.width() * spic.width() / bpic.width());
        sf.height(bf.height() * spic.height() / bpic.height());

        // 存储比例值
        let proportion = bpic.width() / spic.width();

        // 放大效果实现 
        spic.on('mousemove', function(ev) {
            // 存储鼠标当前位置时小放的位置,鼠标将位与小放的中间
            let leftvalue = ev.pageX - $('.magnifier').offset().left - sf.width() / 2;
            let topvalue = ev.pageY - $('.magnifier').offset().top - sf.height() / 2;

            if (leftvalue < 0) {
                leftvalue = 0;
            } else if (leftvalue >= spic.width() - sf.width()) {
                leftvalue = spic.width() - sf.width()
            }

            if (topvalue < 0) {
                topvalue = 0;
            } else if (topvalue >= spic.height() - sf.height()) {
                topvalue = spic.height() - sf.height()
            }

            sf.css({
                left: leftvalue,
                top: topvalue
            });

            bpic.css({
                left: -leftvalue * proportion,
                top: -topvalue * proportion
            });
        });
    }, function() {
        sf.css('visibility', 'hidden');
        bf.css('visibility', 'hidden');
    })

    const list = $('.list ul')

    // 切换子图
    list.on('mouseover', 'li', function() {
        let picurl = $(this).find('img').attr('src');
        spic.find('img').attr('src', picurl);
        bpic.attr('src', picurl);
    });

    let piclength = 5;

    $('.right').on('click', function() {
        let liwidth = $('.list ul li').eq(0).outerWidth(); //62px
        if (piclength < $('.list ul li').length) {
            piclength++;
            console.log(piclength);
            $('.left').css('background', 'url(https://images.changhong.com/chgw/images/pro-ditem-pre_03.jpg) no-repeat left center');
            if (piclength === $('.list ul li').length) {
                $('.right').css('background', 'none');
            }
        }

        list.animate({
            left: -liwidth * (piclength - 5)
        });
    });


    $('.left').on('click', function() {
        let liwidth = $('.list ul li').eq(0).outerWidth(); //62px
        if (piclength > 5) {
            piclength--;
            $('.right').css('background', 'url(https://images.changhong.com/chgw/images/pro-ditem-next_03.jpg) no-repeat left center');
            if (piclength === 5) {
                $('.left').css('background', 'none');
            }
        }
        list.animate({
            left: -liwidth * (piclength - 5)
        });
    });

    function doAddGoods() {
        const reduce = $('.reduce');
        const increase = $('.increase');
        const count = $('.count');
        if (!count.val()) {
            count.val(1)
        }
        count.on('focus', function() {
            count.val('')
        })
        count.on('blur', function() {
            if (!count.val()) {
                count.val(0)
            }
            let reg = /\d/g
            let numvalue = parseInt(count.val());
            if (!reg.test(numvalue)) {
                alert('请输入购买件数')
                count.val(0)
            } else {
                count.val(numvalue)
            }
        })

        reduce.on('click', function() {
            let num = parseInt(count.val());
            if (num >= 1) {
                num--;
                count.val(num)
            }
        })
        increase.on('click', function() {
            let num = parseInt(count.val());
            if (num >= 0) {
                num++;
                count.val(num)
            }
        })



        // 利用本地存储存放sid 和数量实现加购功能
        let arr_sid = []; //存放商品的id
        let arr_num = []; //存放加购数量

        // 创建本地存储存储sid和num
        function getlocal() {
            if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
                arr_sid = localStorage.getItem('localsid').split(',');
                arr_num = localStorage.getItem('localnum').split(',');
            } else {
                arr_sid = [];
                arr_num = [];
            }
        }
        // 加购
        $('.btn').on('click', function() {
            if (parseInt(count.val()) < 1 || count.val() === '') {
                alert('请输入购买数量')
            } else {
                getlocal();
                if (arr_sid.includes(sid)) {
                    let index = arr_sid.indexOf(sid);
                    let localvalue = arr_num[index];
                    let goodnum = parseInt(count.val()) + parseInt(localvalue);
                    arr_num[index] = goodnum;
                    localStorage.setItem('localnum', arr_num.toString());
                } else {
                    arr_sid.push(sid);
                    localStorage.setItem('localsid', arr_sid.toString());
                    arr_num.push(count.val());
                    localStorage.setItem('localnum', arr_num.toString());
                    console.log(2);
                }
                alert("加购成功!")
            }


        });

    }
    doAddGoods();

}

showDetail();